/*
 * @Author: hong bin
 * @Date: 2021-10-03 14:06:13
 * @LastEditTime: 2021-10-04 12:22:26
 * @Description: 材料区 放到图片上的素材 Material
 * @FilePath: /PictureCombination/client/src/components/HomePage/Material.tsx
 */
import { FC, ReactElement, useCallback, useState } from "react";
import styled from "styled-components";
import AddCustomerCover from "./AddCustomerCover";
import guoqi from "../../assets/guoqi.jpeg";

interface IProps {
  selectCover: (file: string) => void;
}

const Material: FC<IProps> = ({ selectCover }): ReactElement => {
  const [customers, setCustomers] = useState<string[]>([guoqi]);

  const handleSelect = useCallback((file: string) => {
    setCustomers(prev => [file, ...prev]);
  }, []);

  return (
    <Container>
      {/* 自定义上传素材 */}
      <Customer>
        <AddCustomerCover onSelect={handleSelect} />
        {setCustomers.length
          ? customers.map((file: string, index) => (
              <img
                key={index}
                onClick={() => selectCover(file)}
                src={file}
                alt='出错'
              />
            ))
          : null}
      </Customer>
    </Container>
  );
};

export default Material;

const Customer = styled.div`
  display: flex;
  padding-top: 2rem;
  position: relative;
  flex-wrap: wrap;

  ::before {
    content: "自定义素材";
    position: absolute;
    top: 0;
    font-weight: bold;
  }

  img {
    width: 7rem;
    height: 7rem;
    border-radius: 0.5rem;
    margin: 0.5rem 0.2rem;
    box-shadow: 2px 2px 12px 0 #ccc;
    cursor: pointer;
  }
`;

const Container = styled.div`
  padding: 1rem;
`;
